<template>
	<view class="prodItem" :animation = "animateData" style="opacity: 0; transform: scale(0.3);" >
		<view class="Box" @click="play">
			<view class="left">
				<image :src="$attrs.poster" class="image"></image>
			<view class="player" v-if="$attrs.way==='video'">
				<view class="box"><view class="start"></view></view>
			</view>
			</view>
			<view class="right">
				<view class="title">{{ $attrs.title }}</view>
				<view class="realname">{{ $attrs.realname }}</view>
				<view class="time">{{ $attrs.time | format }}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { formatTime } from '../../formatTime.js';
import animate from "../../animate.js"
export default {
	data() {
		return {};
	},
	filters: {
		format(val) {
			return formatTime(parseInt(val));
		}
	},
	mixins:[animate.mixin],
	mounted() {
		this.fadeInScale()
	},
	methods:{
		play(){
			this.$attrs.way==="video"?
			this.$emit("playVideo",this.$attrs):
			this.$emit("readText",this.$attrs)
		}
	}
};
</script>

<style lang="scss" scoped>
.prodItem {
	.Box {
		position: relative;
		margin: 15px 15px;
		border-radius: 15px;
		padding: 10px 15px;
		background-color: rgba($color: #fff, $alpha: 0.3);
		display: flex;
		box-shadow: 0 0 15px 0 #808080;
		.left {
			position: relative;
			margin: 5px 0;
			.image {
				border-radius: 10px;
				width: 300upx;
				height: 150upx;
				background-color: #999999;
			}
		}
		.player {
			opacity: 0.7;
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			.box {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #000000;
				position: relative;
			}
			.start {
				position: absolute;
				margin: 0 auto;
				left: 50%;
				top: 50%;
				transform: translate(-15%, -50%);
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-right: 15px solid transparent;
				border-left: 15px solid #fff;
				transition: all 0.3s linear;
			}
		}
		.right {
			width: 340upx;
			overflow: hidden;
			margin-left: 5px;
			.title {
				font-size: 18px;
				line-height: 20px;
				height: 40px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden; //盒子溢出隐藏
			}
			.realname {
				font-size: 15px;
				color: #999999;
			}
			.time {
				font-size: 15px;
				color: #999999;
			}
		}
	}
}
</style>
